<template>
  <div class="combo-container">
    <van-nav-bar title="套餐选择" style="background: #ededed">
      <template #left>
        <van-icon name="arrow-left" size="24" color="#3d3d3d" @click="escCombo" />
      </template>
    </van-nav-bar>
    <!-- goods item -->
    <div class="combo-box" v-if="showCombo">
      <div class="combo-head-box">
        <div class="head-img">
          <img :src="comboItem.image_thumbnail_cdn ? comboItem.image_thumbnail_cdn : localImg" />
        </div>
        <div class="head-title">
          <span>{{ comboItem.name }}</span>
        </div>
        <div class="head-desc">
          <span>Description</span>
          <span>${{ comboItem.price }}</span>
        </div>
      </div>
      <!-- combo items -->
      <div class="combo-content-box">
        <van-swipe class="my-swipe" indicator-color="#ffbf05" ref="swipe" @change="pageIndex" :touchable="false">
          <van-swipe-item v-for="item in comboItem.combo.combo_group" :key="item.id">
            <div class="content-head-box">
              <div class="select-title">
                <span>{{ item.name }}</span>
              </div>
              <div class="select-num">
                <span>请在下列中选择</span>
                <span>({{ item.count ? item.count : 0 }}/1)项</span>
              </div>
            </div>
            <div class="content-box">
              <div class="combo-content" v-for="combo in item.combo_item" :key="combo.id">
                <van-card :title="combo.item.name" :thumb="localImg">
                  <template #tags>
                    <van-tag plain type="danger" v-show="combo.item.stock < 500">售罄</van-tag>
                    <div class="count-box">
                      <van-button icon="minus" @click.stop="subCombo(combo, item.combo_item, item)" v-show="combo.amount > 0" />
                      <div id="count" v-show="combo.amount > 0">{{ combo.amount }}</div>
                      <van-button icon="plus" @click.stop="addCombo(combo, item.combo_item, item)" :disabled="combo.item.stock < 500" type="primary" />
                    </div>
                  </template>
                </van-card>
              </div>
            </div>
          </van-swipe-item>
        </van-swipe>
      </div>

      <div class="combo-btn-box">
        <van-button type="primary" size="small" @click="prev" :disabled="page < 1">上一步</van-button>
        <van-button type="primary" size="small" @click="next" :disabled="!isNext" v-show="page < totalPage">下一步</van-button>
        <van-button type="info" size="small" @click="confirmCombo" :disabled="!completed" v-show="page === totalPage">确定</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'Combo',
  data() {
    return {
      showCombo: false,
      comboItem: {},
      comboList: [],
      page: 0,
      totalPage: 0,
      isNext: false, // 是否能够下一页
      completed: false, // 是否完成套餐选择
      localImg: 'static/img/mxbc/Ice_Cream/Purple_Potato_Latte.jpeg'
    }
  },
  // init current goods data
  created() {
    var id = this.$route.query.id
    var list = this.initGoodsList
    if (list.length) {
      var item = list.find(o => o.id === id)
      this.comboItem = this._.cloneDeep(item)
      this.totalPage = item.combo.combo_group.length - 1
      this.showCombo = true
    }
  },
  // 是否能够点击下一页
  updated() {
    var num = this.page
    var list = this.comboItem.combo.combo_group
    var flag = list[num].combo_item.find(o => o.amount)
    if (flag) return (this.isNext = true)
    this.isNext = false
  },
  watch: {
    // 监听套餐是否选择完成
    comboItem: {
      handler(item) {
        var list = item.combo.combo_group
        list.some(combo => {
          this.completed = false
          var flag = combo.combo_item.find(o => o.amount)
          if (!flag) return true
          this.completed = true
        })
      },
      deep: true
    }
  },
  computed: {
    ...mapState({
      initGoodsList: state => state.home.shopsGoods
    })
  },
  methods: {
    // 当前页数
    pageIndex(index) {
      this.page = index
    },
    // 返回上一页
    prev() {
      this.$refs.swipe.prev()
    },
    // 切换下一页
    next() {
      this.$refs.swipe.next()
    },
    // 减去套餐
    subCombo(combo, list, item) {
      this.$set(combo, 'amount', 0)
      this.$set(item, 'count', 0)
      delete combo.amount
      delete item.count
    },
    // 添加套餐
    addCombo(combo, list, item) {
      this.$set(combo, 'amount', 1)
      this.$set(item, 'count', 1)
      list.forEach(o => {
        if (o.id !== combo.id) {
          this.$set(o, 'amount', 0)
          delete o.amount
        }
      })

      const obj = { ...item }
      obj.items = combo
      delete obj.combo_item
      var combos = this.comboList
      var flag = combos.find(o => o.id === item.id)

      if (!flag) {
        combos.push(obj)
      } else {
        combos.some((o, i) => {
          if (o.id !== combo.id) {
            combos[i] = obj
            return true
          }
        })
      }
      this.comboItem.combo.combos = combos
    },
    // 确认套餐
    confirmCombo() {
      this.$router.push({ name: 'goods', params: this.comboItem })
    },
    // 退出套餐
    escCombo() {
      var flag = this.$route.query.source
      if (!flag) return this.$router.go(-1)
      if (flag === 1) return this.$router.push({ name: 'goods' })
      this.$router.push({ name: 'search' })
    }
  }
}
</script>

<style lang="less" scoped>
.combo-container {
  position: absolute;
  width: 100%;
  height: 100%;
  max-width: 640px;
  background-color: #ededed;
}

.van-nav-bar {
  position: fixed;
  width: 100%;
  max-width: 640px;
  z-index: 3;
}

.combo-box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  top: 46px;
  background-color: #ededed;
  .combo-head-box {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 97%;
    height: 18%;
    border-radius: 9px;
    padding: 0.6em;
    background-color: white;
    .head-img {
      overflow: hidden;
      display: flex;
      align-items: center;
      width: 30%;
      height: 50%;
      border-radius: 6px;
      img {
        width: 100%;
      }
    }
    .head-title {
      width: 100%;
      span {
        width: 100%;
        font-size: 1.1em;
        font-weight: 600;
      }
    }
    .head-desc {
      display: flex;
      width: 100%;
      span:nth-child(1) {
        width: 70%;
        font-size: 0.9em;
        color: #a6a6a6;
      }
      span:nth-child(2) {
        width: 30%;
        font-size: 1.1em;
        color: red;
      }
    }
  }
  .combo-content-box {
    position: absolute;
    width: 97%;
    height: 82%;
    top: 18%;
    margin-top: 0.45em;
    border-radius: 9px;
    padding: 0.3em 0;
    background-color: white;
    .my-swipe,
    .van-swipe {
      position: relative;
      width: 100%;
      height: 100%;
      padding-bottom: 165px;
      /deep/ .van-swipe__indicators {
        position: fixed;
        bottom: 115px;
        .van-swipe__indicator {
          width: 9px;
          height: 9px;
          background-color: #d9d9d9;
        }
      }
      .content-head-box {
        display: flex;
        align-items: center;
        width: 100%;
        height: 36px;
        padding: 0 0.6em;
        margin-bottom: 0.3em;
        .select-title {
          width: 50%;
          span:nth-child(1) {
            color: #878787;
            font-size: 1.3em;
          }
        }
        .select-num {
          position: absolute;
          display: flex;
          flex-direction: column;
          align-items: center;
          right: 0.6em;
          font-size: 0.8em;
          color: #a6a6a6;
        }
      }
      .content-box {
        position: relative;
        width: 100%;
        height: 100%;
        overflow: auto;
        .combo-content {
          width: 100%;
          .van-card {
            padding: 0 0.6em;
            background-color: white;
            .van-card__header {
              display: flex;
              align-items: center;
              height: 69px;
              .van-card__title {
                width: 80%;
                font-size: 1.1em;
                color: #666666;
              }
              .van-card__thumb {
                height: 60px;
                width: 60px;
                .van-image {
                  width: 100%;
                  height: 100%;
                  .van-image__img {
                    width: 100%;
                    height: 100%;
                  }
                }
              }
              .van-card__content {
                display: flex;
                justify-content: center;
                min-height: 60px;
                .van-tag--danger {
                  position: absolute;
                  bottom: 0;
                }
                .count-box {
                  display: flex;
                  align-items: center;
                  position: absolute;
                  bottom: 22px;
                  max-width: 640px;
                  right: 0;
                  #count {
                    width: 21px;
                    text-align: center;
                    font-size: 15px;
                  }
                  .van-button {
                    width: 18px;
                    height: 18px;
                    padding: 0;
                    border-radius: 50%;
                  }
                  .van-button--primary {
                    border: 1.5px solid #ffbf05;
                    background-color: #ffbf05;
                    font-size: 1em;
                  }
                  .van-button--default {
                    border: 1.5px solid #a6a6a6;
                    color: #a6a6a6;
                    font-size: 1em;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  .combo-btn-box {
    position: absolute;
    bottom: 66px;
    .van-button--primary,
    .van-button--info {
      width: 120px;
      border: none;
      border-radius: 6px;
      margin: 0 1.2em;
      background-color: #ffbf05;
      font-size: 1em;
    }
  }
}
</style>
